<div class="border-bottom p-2">
  <farris-radiogroup [(ngModel)]="radioValue" [horizontal]="true" textField="text" valueField="value"
    [data]="radioOptions" (changeValue)="changeRadioType()">
  </farris-radiogroup>
</div>


<div *ngIf="radioValue==='custom'" class="f-utils-fill d-flex">
  <div *ngIf="editorParams && editorParams.exampleCode" class="col-4 f-utils-fill-flex-column"
    style="user-select: text;">
    <h5>示例代码</h5>
    <pre>
{{editorParams.exampleCode}}
      </pre>
  </div>

  <div class="editor" [ngClass]="editorParams && editorParams.exampleCode?'col-8':''">
    <angular-monaco-editor class="custom-monaco-editor" [options]="codeEditorOptions" [(ngModel)]="customValue"
      (onInit)="onMonacoInit($event)">
    </angular-monaco-editor>
  </div>
</div>

<div class="f-utils-fill d-flex" *ngIf="radioValue==='expression'">
  <app-expression-editor [value]="expressionValue" [editorParams]="expressionParams"></app-expression-editor>
</div>

<ng-template #bindingFooter>
  <button type="button" class="btn btn-secondary" (click)="clickCancel()">取消</button>
  <button type="button" class="btn btn-primary" (click)="clickConfirm()">确定</button>
</ng-template>